<template>
	<view class="home clearfix">
		<cu-custom bgColor="bg-white " isBack>
			<block slot="content">快乐拼团</block>
			<block slot="right"><text class="mr15 f12" @click="pushPage('/pages/order/pintuanorder')">我的拼团</text></block>
		</cu-custom>
		<image src="/static/class/pintuan.png" class="pintuanpic" mode=""></image>
		<view class="flex align-center flex-wrap justify-between pintuan-mt">
			<view class="pintuan-box flex align-start px10 justify-between" :class="{mt10:index!=0}" v-for="(item, index) in List" @click="pushPage('/pages/goods/ptgoods?id=' + item.id)" :key="index">
				<image :src="item.pic" class="tuijian-pic mt10"></image>
				<view class="bg-white flex flex-direction px5 py10 pintuan-right">
					<view class="f14 ellipsis2 mt5 bg-white ">{{ item.name }}</view>
					<view class="flex align-center mt10">
						<view class="pintuan-round discenter ml5 f12 radius-30">
							<image src="/static/class/hot.png" class="hot" mode=""></image>
							<text>{{item.ptPeople}}人团</text>
						</view>
						<view class="flex align-center ml10 f12">
							<text>还差</text>
							<text class="text-red">{{item.ptPeopling}}</text>
							<text>人</text>
						</view>
					</view>
					<view class="flex align-end justify-between mt10">
						<view class="flex align-end">
							<view class="flex align-end text-red">
								<text class="f12">￥</text>
								<text class="f16">{{ item.ptMoney }}</text>
							</view>
							<view class="flex align-end oldprice ml10 text-info">
								<text class="f12">￥</text>
								<text class="f14">{{ item.money }}</text>
							</view>
						</view>
						<view class="discenter pintuan-button">去拼团</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			
		}
	},
	onLoad(e) {
		this.getData()
	},
	onReachBottom() {
		this.getData()
	},
	methods: {
		...mapActions(['setStoretype']),
		async getData() {
			if (this.finish) return
			let {
				data:{ptgoods}
			} = await this.$http.post('home.pintuanpage', { page: this.page },{tipConfig: { storeLoading: true, isSuccessTip: false }})
			this.finish = ptgoods.length < 20
			!this.finish && (this.page += 1)
			this.List = [...this.List, ...ptgoods]
		},
		
	}
}
</script>

<style lang="less">
.tuijian-box{
	width: 320rpx;
}
.tuijian-pic {
	width: 240rpx;
	height: 240rpx;
}
.pintuanpic{
	width: 100%;
	height: 325rpx;
}
.pintuan-mt{
	margin-top: -50rpx;
	position: relative;
	z-index: 3;
}
.pintuan-box{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 280rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
}
.pintuan-right{
	width: calc(100% - 270rpx);
}
.pintuan-round{
	width: 156rpx;
	height: 48rpx;
	background-color: #f3b2a2;
	color: #D73329;
}
.hot{
	width: 17rpx;
	height: 20rpx;
	margin-right: 6rpx;
}
.pintuan-button{
	width: 120rpx;
	height: 60rpx;
	border-radius: 10rpx;
	background-color: #D73329;
	color: #FFFFFF;
}
.oldprice{
	text-decoration: line-through;
}
</style>
